<script type="text/javascript">

    var rendererOptions = {
	  draggable: true
    };
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    var directionsService = new google.maps.DirectionsService();
    var map;
    
    var srilanka = new google.maps.LatLng(7.0000, 81.0000);
	var orig = '';
	var dest = '';
	
	var data = {};
	var tempRoute = '';

	
    function initialize(origin, destination) {
		
      var mapOptions = {
        zoom: 8,
        center: srilanka
      };

      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
      directionsDisplay.setMap(map);
      directionsDisplay.setPanel(document.getElementById('directionsPanel'));
    
      google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
        computeTotalDistance(directionsDisplay.getDirections());
      });
  
      calcRoute();

    }
	
	function save_waypoints()
	{
		var w=[],wp;
		var rleg = directionsDisplay.directions.routes[0].legs[0];
		data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()}
		data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()}
		var wp = rleg.via_waypoints
		for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]
		data.waypoints = w;
		 
		tempRoute = JSON.stringify(data);
		console.info(tempRoute);
	}
	
	function loadSavedRoute(savedRoute)
	{	
		//tempRoute = '{"start":{"lat":7.0668187,"lng":79.89354939999998},"end":{"lat":6.955631899999999,"lng":79.88476919999994},"waypoints":[]}';
		if (savedRoute != "") {
			var os = eval('(' + savedRoute + ')');
			var wp = [];
			for(var i=0;i<os.waypoints.length;i++)
				wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),'stopover':false }
				 
			directionsService.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng),
			'destination':new google.maps.LatLng(os.end.lat,os.end.lng),
			'waypoints': wp,
			'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) {
				if(sts=='OK')directionsDisplay.setDirections(res);
			}) 
		}

	}

    function calcRoute() {
      var request = {
        origin: orig,
        destination: dest,
        travelMode: google.maps.TravelMode.DRIVING
      };
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
    }
    
    function computeTotalDistance(result) {
      var total = 0;
      var myroute = result.routes[0];
      for (var i = 0; i < myroute.legs.length; i++) {
        total += myroute.legs[i].distance.value;
      }
      total = total / 1000.
      document.getElementById('total').innerHTML = total + ' km';
    }
    
    //google.maps.event.addDomListener(window, 'load', initialize);
    
</script>

<div id="map-canvas"  style="width:100%; height:74%;"></div>
<div id="directions"  style="width:100%; height:80%; overflow:auto;">
    <div id="directionsPanel">
        <p>Total Distance: <span id="total"></span></p>
    </div>
</div>
<div class="alert alert-info" style="float:left; padding-top: 0px; padding-bottom: 0px; margin-bottom: 0px; height:12%; overflow:auto"><strong>Note : </strong>You may define your prefered start and end points along with any stopping points by dragging waypoints on the map (Not Start and End markers). You should press "Confirm Route" and then should proceed with the reservation.</div>
<div style="float:left">
	<div id="div-load-original-route" style="float:left;"><input type="button" id="load-original-route" value="Load Original"/></div>
	<div id="div-confirm-route" style="float:left;"><input type="button" id="confirm-route" value="Confirm Route"/></div>
    <div id="div-load-route" style="float:left;"><input type="button" id="load-route" value="Load Confirmed Route"/></div>
    <div id="div-show-directions" style="float:left;"><input type="button" id="show-directions" value="Show Directions"/></div>
    <div id="div-hide-directions" style="float:left;"><input type="button" id="hide-directions" value="Hide Directions"/></div>
    <div id="div-hide-map" style="float:left;"><input type="button" id="hide-map" value="Hide Map"/></div>
</div>


<script>
    $(function(){
        $("#directions").hide();
		$("#div-hide-directions").hide();
		$("#div-load-route").hide();
    });
    
    $("#show-directions").bind('click', function(){
        $("#directions").show();
		$("#map-canvas").hide();
		$("#route-controls").hide();
		$("#div-hide-directions").show();
		$("#div-show-directions").hide();
    });
    
    $("#hide-directions").bind('click', function(){
        $("#directions").hide();
		$("#map-canvas").show();
		$("#route-controls").show();
		$("#div-hide-directions").hide();
		$("#div-show-directions").show();
		
    });
	
	$("#hide-map").bind('click', function(){
		$("#div-map-panel").hide();
    });
	
	$("#confirm-route").bind('click', function(){
		save_waypoints();
		$("#div-load-route").show();
    });
	
	$("#load-route").bind('click', function(){
		loadSavedRoute(tempRoute);
    });
	
	$("#load-original-route").bind('click', function(){
		loadSavedRoute(strRoute);
		tempRoute = "";
		$("#div-load-route").hide();
    });
	
	
	
</script>

